<template>
  <el-row>
    <el-col :span="4">
      <div id="left">

      </div>
    </el-col>
    <el-col :span="16">
      <div id="right">
        <el-form :model="accountInfo">
          <el-form-item label="用户姓名">
            <el-input v-model.trim="accountInfo.userName" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model.trim="accountInfo.phonenumber" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input v-model.trim="accountInfo.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="用户性别">
            <el-select v-model="accountInfo.sex" placeholder="请选择性别">
              <el-option value="0" label="男">男</el-option>
              <el-option value="1" label="女">女</el-option>
              <el-option value="2" label="未知">未知</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="warning" @click="changePassWord">修改密码</el-button>
        <el-button type="primary" @click="changeUserInfo">提交修改</el-button>
      </div>
    </el-col>
  </el-row>
  <div id="passwordChangeDialog">

    <el-dialog v-model="passwordDiaLogFlag" title="修改密码" width="550">
      <el-form >
        <el-form-item label="旧密码：" label-width="100">
          <el-input v-model.trim="oldPassword" show-password />
        </el-form-item>
        <el-form-item label="新密码：" label-width="100">
          <el-input v-model.trim="newPassword" show-password />
        </el-form-item>
        <el-form-item label="确认密码" label-width="100">
          <el-input v-model.trim="confirmPassword" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="passwordDiaLogFlag = false">取消</el-button>
        <el-button type="primary" @click="confirmPasswordChange">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {getUserRole} from "../../api/login";
import {editUserVue, resetPwdByUser} from "../../api/system";
import {useUsersStore} from "../../store/userInfo.ts";
import router from "../../router";
let accountInfo  = ref({})
let oldPassword = ref();
let newPassword = ref();
let confirmPassword = ref();
let passwordDiaLogFlag = ref(false)
let store = useUsersStore();
let {name,role,token} = store;
onMounted(async () => {
  await query();
})

const query = async () =>{
  let res =await getUserRole(null);
  accountInfo.value = res.data;
}
const changeUserInfo = async () =>{
  let res = await editUserVue(accountInfo.value)
  if(res.code == 200){
    ElMessage.success(res.msg)
    await query();
  }else{
    ElMessage.error(res.msg)
  }
}
const changePassWord = async () =>{
  passwordDiaLogFlag.value =true;
  oldPassword.value =''
  newPassword.value =''
  confirmPassword.value =''
}
const confirmPasswordChange = async () =>{
  if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
    ElMessage.error("密码不能为空")
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    ElMessage.error("新密码和确认密码不一致")
    return;
  }

  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,12}$/;
  if (!passwordRegex.test(newPassword.value)) {
    ElMessage.error("新密码必须是6-12位且包含至少一个字母和一个数字")
    return
  }
  let res = await resetPwdByUser({
    oldPassword:oldPassword.value,
    newPassword:newPassword.value
  })
  if(res.code == 200){
    ElMessage.success(res.msg)
    store.$reset();
    await router.push("/")
  }else {
    ElMessage.error(res.msg)
  }
}
</script>

<style scoped>

</style>
